<header class="site-header">
    <div class="site-header-topbar">
        <div class="container">
            <div class="topbar-menu">
                {% for menu in site.menus %}
                <div class="item">
                    <a href="{{ menu.href }}"
                       target="{{ menu.target | default: _self }}"
                       title="{{ menu.label }}">
                        {{ menu.label }}
                    </a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="container">
        <a id="site-header-brand" href="/" title="{{ site.name }}">
            <span class="octicon octicon-smiley"></span>
            {{ site.name }}
        </a>
        <nav class="site-header-nav" role="navigation">
            {% for nav in site.navs %}
            <div class="{% if page.menu == nav.label %} selected {% endif %} site-header-nav-item hvr-underline-from-center">
                <a href="{{ nav.href }}"
                   target="{{ nav.target | default: _self }}"
                   title="{{ nav.label }}">
                    {{ nav.label }}
                </a>
                {% if nav.subnav %}
                <ul class="submenu">
                    {% for subItem in nav.subnav %}
                    <li><a href="{{ subItem.subHref }}" 
                           target="{{ subItem.target | default: _self }}"
                     >{{ subItem.subLabel }}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
            </div>
            {% endfor %}
        </nav>
    </div>
</header>
